<template>
	<div class="page-row p-x-0">
		<div class="box-left">
			<el-menu default-active="0" @select="change" class="el-menu-vertical-demo">
				<el-menu-item v-for="(item,index) in caselist" :key="index" :index="index.toString()">
					<span slot="title">{{item.casename}}</span>
				</el-menu-item>
			</el-menu>
		</div>
		<div class="box-right p-0">
			<div class="page-wrap">
				<div class="page-content p-0">
					<div class="page-column p-0" :style="{'overflow':'scroll'}">
						<el-row v-for="(item,index) in ShowList.source_term" :key="index">
							<el-col :span="24">
								<div class="my_title p-b-20">距离{{index+1}}：{{item}}</div>
								<el-table
									v-loading="loading"
									border
									:data="ShowList.tablist_list[index]"
									style="width: 100%"
								>
									<el-table-column align="center" prop="paramname" label="参数" min-width="100"></el-table-column>
									<el-table-column align="center" prop="MEAN" label="MEAN" min-width="100">
														<template slot-scope="scope">
															<div v-if="scope.row.MEAN=='1.7976931348623157e+308'">超出上限</div>
															<div v-else>{{scope.row.MEAN}}</div>
														</template>
													</el-table-column>
													<el-table-column align="center" prop="WUSHITH" label="50TH" min-width="100">
														<template slot-scope="scope">
															<div v-if="scope.row.WUSHITH=='1.7976931348623157e+308'">超出上限</div>
															<div v-else>{{scope.row.WUSHITH}}</div>
														</template>
													</el-table-column>
													<el-table-column align="center" prop="JIUSHITH" label="90TH" min-width="100">
															<template slot-scope="scope">
															<div v-if="scope.row.JIUSHITH=='1.7976931348623157e+308'">超出上限</div>
															<div v-else>{{scope.row.JIUSHITH}}</div>
														</template>
													</el-table-column>
													<el-table-column align="center" prop="JIUWUTH" label="95TH" min-width="100">
															<template slot-scope="scope">
															<div v-if="scope.row.JIUWUTH=='1.7976931348623157e+308'">超出上限</div>
															<div v-else>{{scope.row.JIUWUTH}}</div>
														</template>
													</el-table-column>
													<el-table-column align="center" prop="JIUJIUTH" label="99TH" min-width="100">
														<template slot-scope="scope">
															<div v-if="scope.row.JIUJIUTH=='1.7976931348623157e+308'">超出上限</div>
															<div v-else>{{scope.row.JIUJIUTH}}</div>
														</template>
													</el-table-column>
													<el-table-column align="center" prop="JIUJIUWUTH" label="99.5TH" min-width="100">
														<template slot-scope="scope">
															<div v-if="scope.row.JIUJIUWUTH=='1.7976931348623157e+308'">超出上限</div>
															<div v-else>{{scope.row.JIUJIUWUTH}}</div>
														</template>
													</el-table-column>
								</el-table>
								<div class="separate m-b-20"></div>
							</el-col>
						</el-row>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import selectPara from "@/components/selectPara"
import commCheckbox from "@/components/commCheckbox"
import ImageCropper from "@/components/ImageCropper"
import FixBottomButton from "@/components/FixBottomButton"
import ueditor from "@/components/ueditor"
import textLength from "@/components/common/comp/textLength"
import { commPara } from "@/mixins/mixins"
import { mapState } from "vuex"
import Axios from "axios"
import { dome, selecttext } from "@/utils/verify.js"
 
export default {
	name: "aboutUs",
	props: {
		basicDataF: Object,
	},
	mixins: [commPara],
	components: {
		selectPara,
		ImageCropper,
		textLength,
		commCheckbox,
		FixBottomButton,
		ueditor,
	},

	data() {
		return {
			activeTab: "2",
			YANTUANNumoptions: [],
			PARAMSoptions: [],
			distinceList: [],
			caselist: [],
			ShowList: [],
			ruleForm: {
				YANTUANNum: "",
				PARAMSNAME: "",
				GAILV: "",
			},
			tableData: [],
			tableDataShow: false,
			rules: {
				YANTUANNum: [
					{
						validator: selecttext,
						trigger: ["change", "blur"],
					},
				],
				PARAMSNAME: [
					{
						validator: selecttext,
						trigger: ["change", "blur"],
					},
				],
				GAILV: [
					{
						validator: dome(0, 1),
						trigger: ["change", "blur"],
					},
				],
			},

			loading: false,
		}
	},
	computed: {
		...mapState({
			basic_Data: (state) => state.token.basic_Data,
			early_Data: (state) => state.token.early_Data,
			longterm_Data: (state) => state.token.longterm_Data,
		}),
	},
	created() {
		this.setOption(0)
	},
	methods: {
		change(index) { 
			this.setOption(index)
		},
		setOption(e) {
			this.loading = true
			let params = {
				batch_id: this.$route.query.id,
			} 
			this.$appApi
				.GET_RESULT_0_2(params)
				.then((res) => {
					var tempres = res.data.substring(0, 1)
					if (tempres == "S") {
						this.loading = false
						var str = JSON.parse(res.data.substring(8)).type0_2_list 
						this.caselist = str
						this.ShowList = str[e] 
						this.ShowList.tablist_list = [] 
						let templist = str[e].fin_result_list.map(
							(item, index) => {
								let tempTab = []
								// console.log(item)
								tempTab = str[e].paramname.map(
									(paramnameitem, paramnameindex) => {
										return {
											paramname: paramnameitem,
											MEAN: item[paramnameindex][0],
											WUSHITH: item[paramnameindex][1],
											JIUSHITH: item[paramnameindex][2],
											JIUWUTH: item[paramnameindex][3],
											JIUJIUTH: item[paramnameindex][4],
											JIUJIUWUTH: item[paramnameindex][5],
										}
									}
								)

								return tempTab
							}
						) 
						this.ShowList.tablist_list = templist  
					} else if (tempres == "E") {
						let message = res.data.substring(6)
						this.$notify.error({
							title: "请求数据失败！",
							message: message,
							type: "success",
						})
					}
				})
				.catch((err) => {
					console.log(err)
				})

			let tempPARAMSoptions = ["空气浓度", "地面浓度", "弥散因子"]
			this.PARAMSoptions = tempPARAMSoptions.map((item) => {
				return {
					label: item,
					value: item,
				}
			})
		},
		submitFun() {
			//保存
			this.$refs.form.validate((valid) => {
				if (valid) {
					let params = {
						batch_id: this.$route.query.id,
						yantuan_number: this.ruleForm.YANTUANNum,
						param_name: this.ruleForm.PARAMSNAME,
						gailv: this.ruleForm.GAILV,
					} 
					this.$appApi
						.GET_RESULT_0_1(params)
						.then((res) => {
							var str = res.data.substring(0, 1)
							if (str == "S") {
								this.tableDataShow = true
								var str = JSON.parse(res.data.substring(8))
									.type0_1_list 
								this.distinceList = str[0].distince_list 
								this.tableData = str.map((item) => {
									let tempTab = {
										caselist: item.casename,
									}
									item.fin_result_list.forEach(
										(item2, index) => {
											tempTab["distince" + index] = item2
										}
									)
									return tempTab
								})
							} else if (str == "E") {
								let message = res.data.substring(6)
								this.$notify.error({
									title: "请求数据失败！",
									message: message,
									type: "success",
								})
							}
						})
						.catch((err) => {
							console.log(err)
						})
				}
			})
		},
	},
}
</script>
<style lang="scss" scoped>
.page-flex-row /deep/ .el-collapse-item__header {
	background: #f3f9fe;
}
</style>